<template>
    <el-card style="width: 60%;margin-left: 20%;margin-top: 1%;">
        <template #header>
            <div class="card-header">
                <span>活动详情</span>
            </div>
        </template>
        <div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="logo">
                        <el-image :src="image" alt="logo" fit="contain"></el-image>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-descriptions :title="activityName" :column="1">
                        <template #extra>
                            <el-button type="primary" v-if="isAfterNow" @click="toSignup" :disabled="disabled">{{
                                form.state }}</el-button>
                            <el-button type="primary" v-else="!isAfterNow" disabled>活动已结束</el-button>
                            <!-- <el-button type="primary" v-if="isBtn === 2" disabled>报名审核中</el-button>
                            <el-button type="primary" v-if="isBtn === 3" disabled>报名成功</el-button> -->
                        </template>
                        <template #default>
                            <el-descriptions-item label="活动时间" width="80px">
                                <span>{{ descriptionData.activityDate }} &ensp;</span>
                                <span>{{ descriptionData.startTime }}-{{ descriptionData.endTime }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="活动地点" width="80px">
                                {{ descriptionData.activityAddress }}
                            </el-descriptions-item>
                            <el-descriptions-item label="负责人">
                                {{ director.name }}&ensp;{{ director.telephone }}
                            </el-descriptions-item>
                        </template>
                    </el-descriptions>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>
<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useRouter, useRoute } from "vue-router";
import $axios from '../../../utils/axios';
import { ElDrawer, ElMessageBox, ElNotification } from 'element-plus'

const router = useRouter();
const route = useRoute();
const descriptionData = ref({})
const director = ref({})
const activityDate = ref('')
const activityTime = ref('')
const activityName = ref('')
const aId = parseInt(route.query.Id)
const image = ref()
const uId = JSON.parse(sessionStorage.getItem('user')).id
const form = ref({})
const disabled = ref(false)

const pre4Init = async () => {
    const path = '/userActivity/selectByuIdByaId/' + uId + '/' + aId
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        form.value = res.result
        console.log(form.value);
        disabled.value = true
        // if (!isAfterNow) {
        //     isBtn.value = 1
        // }
        // else {
        //     isBtn.value = 0
        // }
    } else if (res.code === 100 && isAfterNow) {
        disabled.value = false
        form.value.state = "报名"
    }
    console.log(disabled.value);
}

const init = async () => {
    console.log("aId:" + aId);
    console.log("uId:" + uId);
    pre4Init()
    const path = '/activity/selectById/' + aId
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        descriptionData.value = res.result
        console.log(descriptionData.value);
        director.value = descriptionData.value.director
        console.log(director.value);
        activityDate.value = descriptionData.value.activityDate
        activityTime.value = descriptionData.value.startTime
        activityName.value = descriptionData.value.activityName
        image.value = descriptionData.value.image
    }
}
init()

// 创建一个计算属性来组合日期和时间，并与当前时间进行比较  
const compare = computed(() => {
    const date = `${activityDate.value}T${activityTime.value}Z`
    const dateTime = new Date(date)
    console.log(date);
    console.log(dateTime);
    return dateTime;
})
const now = computed(() => new Date());

const isBtn = ref(-1)
// 比较日期时间  
// let isBeforeNow = computed(() => compare.value < now.value);//活动已结束
let isAfterNow = computed(() => compare.value > now.value);//可以报名
// const btnbtn=()=>{
//     if(isAfterNow){
//         isBtn.value=0
//     }
//     else if(isBeforeNow){
//         isBtn.value=1
//     }
// }

// 使用 watchEffect 监听 activityDate 和 activityTime 的变化
watchEffect(() => {
    if (isAfterNow) {
        isBtn.value = 0
    }
    else if (isBeforeNow) {
        isBtn.value = 1
    }
    // if (activityDate.value && activityTime.value) {
    //     // 这里可以打印比较结果或执行其他逻辑  
    //     console.log(isAfterNow.value, isBeforeNow.value)
    // }
})

const pre4Sign = () => {
    var now = new Date()
    var year = now.getFullYear()
    var month = now.getMonth() + 1 < 10 ?
        '0' + (now.getMonth() + 1) : now.getMonth() + 1
    var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate()
    var hour = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
    var minute = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
    var second = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
    form.value.enterDate = year + '-' + month + '-' + day
    form.value.enterTime = hour + ":" + minute + ":" + second
    form.value.uId = uId
    form.value.aId = aId
    console.log(form.value);
}

const toSignup = async () => {
    pre4Sign()
    console.log(form.value);
    const path = '/userActivity/insert'
    const { data: res } = await $axios.put(path, form.value)
    if (res.code === 200) {
        init()
        // isAfterNow = false
        // isBtn.value = 2
        // console.log(isBtn.value);
        ElNotification({
            title: '成功',
            message: '报名成功！',
            type: 'success',
        })
    }
    else {
        ElNotification({
            title: '失败',
            message: '报名人数已满！',
            type: 'error',
        })
    }
}
</script>